<template>
  <div class="page-container-padding page-view">
    <div class="actions-bar">
      <div>选择人员：</div>
      <el-select v-model="queryParam.userId" style="width: 150px" filterable>
        <el-option
          v-for="u in userList"
          :key="u.id"
          :value="u.id"
          :label="u.admin_name"
        />
      </el-select>
      <div>开始日期：</div>
      <el-date-picker
        v-model="queryParam.start"
        style="width: 150px"
        value-format="yyyyMMdd"
        :clearable="false"
      />
      <div>结束日期：</div>
      <el-date-picker
        v-model="queryParam.end"
        style="width: 150px"
        value-format="yyyyMMdd"
        :clearable="false"
      />
      <el-button
        type="primary"
        icon="el-icon-search"
        style="margin-left: 10px"
        :loading="queryParam.queryLoading"
        @click="getReports"
      >
        确定查询
      </el-button>
      <el-button
        icon="el-icon-collection"
        :loading="queryParam.zipLoading"
        @click="toGetZip"
      >
        {{ queryParam.zipBtnText }}
      </el-button>
    </div>

    <div v-show="markStatData.length > 0" style="margin-top: 10px">
      <el-table border stripe :data="markStatData">
        <el-table-column prop="admin_name" label="姓名" width="150" />
        <el-table-column prop="stat_count" label="标记数" />
      </el-table>
    </div>

    <div style="margin-top: 10px">
      <el-table
        border
        stripe
        :data="reportList"
        :row-class-name="setRowClassName"
      >
        <el-table-column prop="file_date" label="报告日期" width="150" />
        <el-table-column label="名称" min-width="400" show-overflow-tooltip>
          <template #default="{ row }">
            <div class="file-title" @click="toShowFile(row)">
              <vab-icon :icon="['fas', 'file-pdf']"></vab-icon>
              {{ row.title }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="variety_name" label="品种" width="150" />
        <el-table-column prop="admin_name" label="作者" width="150" />
        <el-table-column prop="create_time" label="创建时间" width="160" />
      </el-table>
    </div>
  </div>
</template>
<script>
  import { datetimeToStr } from '@/utils/datetimeUtils'
  import { getAnalystList } from '@/api/user'
  import {
    GetStatReport,
    GetZipReports,
  } from '@/api/departmentWork/periodReport'
  export default {
    data() {
      return {
        userList: [],
        fileType: 'Annual',
        queryParam: {
          userId: 0,
          start: null,
          end: null,
          zipBtnText: '打包下载',
          zipLoading: false,
          queryLoading: false,
        },
        reportList: [],
        markStatData: [],
      }
    },
    mounted() {
      getAnalystList().then((res) => {
        this.userList = res.data
        this.userList.unshift({ id: 0, admin_name: '全部人员' })
      })
      const curDate = new Date()
      this.queryParam.start = datetimeToStr(
        new Date(curDate.getFullYear(), curDate.getMonth(), 1),
        true,
        ''
      )
      this.queryParam.end = datetimeToStr(curDate, true, '')
      this.getReports()
    },
    methods: {
      getReports() {
        this.queryParam.queryLoading = true
        GetStatReport(
          this.fileType,
          this.queryParam.userId,
          this.queryParam.start,
          this.queryParam.end
        ).then((res) => {
          this.reportList = res.data.rows
          this.statMarkData()
          this.queryParam.queryLoading = false
        })
      },
      statMarkData() {
        this.markStatData = []
        const statUserIds = []
        const stateDict = {}
        for (let i = 0; i < this.reportList.length; i++) {
          const o = this.reportList[i]
          if (!o.mark_state || o.mark_state !== 1) {
            continue
          }
          if (statUserIds.indexOf(o.creator_id) === -1) {
            statUserIds.push(o.creator_id)
            stateDict[o.creator_id] = {
              admin_name: o.admin_name,
              user_id: o.creator_id,
              stat_count: 1,
            }
          } else {
            const stat = stateDict[o.creator_id]
            stat.stat_count += 1
          }
        }
        for (let key in stateDict) {
          if (stateDict.hasOwnProperty(key)) {
            this.markStatData.push(stateDict[key])
          }
        }
      },
      toShowFile(row) {
        window.open(row.file_url)
      },
      toGetZip() {
        this.queryParam.zipBtnText = '正在打包'
        this.queryParam.zipLoading = true
        GetZipReports(
          this.fileType,
          this.queryParam.userId,
          this.queryParam.start,
          this.queryParam.end
        ).then((res) => {
          this.queryParam.zipBtnText = '打包完成'
          // 调用下载
          window.open(res.data.zip)
          this.queryParam.zipBtnText = '打包下载'
          this.queryParam.zipLoading = false
        })
      },
      setRowClassName({ row }) {
        return row.mark_state === 1 ? 'mark-row' : ''
      },
    },
  }
</script>
<style scoped lang="scss">
  .page-view {
    .file-title {
      cursor: pointer;
    }
    .actions-bar {
      display: flex;
      align-items: center;
      .el-select ::v-deep .el-input__inner {
        border: none;
        box-shadow: none;
        border-bottom: 1px solid #999;
        border-radius: 0;
      }
      .el-date-editor ::v-deep .el-input__inner {
        border: none;
        box-shadow: none;
        border-bottom: 1px solid #999;
        border-radius: 0;
      }
    }
    .el-table ::v-deep .mark-row {
      color: #cf3437;
    }
  }
</style>
